import * as echarts from 'echarts'
import { yAxis, xAxis, barWidth, grid, nowSize } from '@/assets/js/echarts/config'

export default ({
    tagId, data = {},
}) => {

    const myChart = echarts.init(document.getElementById(tagId));
    myChart.clear()
    const option = {
        grid,
        legend: {
            right: '2%',
            top: 0,
            itemHeight: 6,
        },
        tooltip: {
            trigger: 'axis',
            valueFormatter: value => value + data.unit
        },
        xAxis: {
            type: 'category',
            data: data.x,
            ...xAxis,
            axisLabel: {
                show: true,
                color: '#999999',
                fontSize: 11,
                formatter: (val) => val.substr(-2),
            },
        },
        yAxis: {
            type: 'value',
            ...yAxis,

        },
        series: [{
            name: '本年',
            data: data.year,
            type: 'line',
            color: '#9ea0e7',
            lineStyle: {
                normal: {
                    width: 1,
                },
            },
        }, {
            name: '去年',
            data: data.lastYear,
            type: 'line',
            color: '#72d08c',
            lineStyle: {
                normal: {
                    width: 1,
                },
            },
        }]
    }
    myChart.setOption(option)
    // 图表自适应
    window.addEventListener('resize', function () {
        myChart.resize();
    })
}

// const color = [
//     '#9ea0e7',
//     '#72d08c'
// ]
// export default ({ tagId, data: { data, unit } }) => {
//     const legendItems = [
//         { name: '本年', marker: 'circle', fill: color[0] },
//         { name: '去年', marker: 'circle', fill: color[1] }
//     ]
//     // 实例化chart
//     let chart = new F2.Chart({
//         id: tagId,
//         pixelRatio: window.devicePixelRatio, // 指定分辨率
//         height: 160
//     })
//     // 载入数据
//     chart.source(data)

//     chart.scale('house_num_year', {
//         alias: '本年'// 字段别名
//     });
//     chart.scale('house_num_last_year', {
//         alias: '去年' // 字段别名
//     });
//     chart.scale('month', {
//         formatter: (val) => val.substr(-2),
//     });

//     // 展示图例（legend）
//     chart.legend({
//         position: 'top', // 设置图例的显示位置，可设置的值为：'top'、'right'、'bottom'、'left'，分别表示上、右、下、左。默认为 top。
//         custom: true, // 当 custom 为 true，表示不使用默认生成的图例，允许用户自定义图例
//         items: legendItems, // 自定义图例时需要用户自己声明具体的图例项 items
//         align: 'center'
//     })
//     // 展示提示信息
//     chart.tooltip({
//         custom: true, // 自定义 tooltip 内容框
//         onChange: function onChange(obj) {
//             const legend = chart.get('legendController').legends.top[0];
//             const tooltipItems = obj.items;
//             const legendItems = legend.items;
//             const map = {};
//             legendItems.forEach(function (item) {
//                 map[item.name] = { ...item };
//             });
//             tooltipItems.forEach(function (item) {
//                 const name = item.name;
//                 const value = item.value;
//                 if (map[name]) {
//                     map[name].value = value + unit;
//                 }
//             });
//             legend.setItems(Object.values(map));
//         },
//         onHide: function onHide() {
//             const legend = chart.get('legendController').legends.top[0];
//             legend.setItems(chart.getLegendItems().country);
//         }
//     })
//     chart.line().position('month*house_num_year').color(color[0])
//     chart.point().position('month*house_num_year').color(color[0])
//     chart.line().position('month*house_num_last_year').color(color[1])
//     chart.point().position('month*house_num_last_year').color(color[1])

//     // 渲染图表
//     chart.render()


//     // const tempData = data.reduce((sum, { house_num_last_year, month, house_num_year }) => {
//     //     sum.push({
//     //         date: month,
//     //         type: '本年',
//     //         value: house_num_year,
//     //         color: '#9ea0e7'
//     //     })
//     //     sum.push({
//     //         date: month,
//     //         type: '去年',
//     //         value: house_num_last_year,
//     //         color: '#72d08c'
//     //     })
//     //     return sum
//     // }, [])

//     // console.log('ddd', data, tempData)

//     // const chart = new F2.Chart({
//     //     id: tagId,
//     //     pixelRatio: window.devicePixelRatio
//     // });

//     // // 定义两个度量字段
//     // const scales = {
//     //     date: { type: 'cat', formatter: (val) => val.substr(-2), },
//     // };

//     // chart.source(tempData, scales);

//     // chart.tooltip({
//     //     custom: true, // 自定义 tooltip 内容框
//     //     onChange: function onChange(obj) {
//     //         const legend = chart.get('legendController').legends.top[0];
//     //         const tooltipItems = obj.items;
//     //         const legendItems = legend.items;
//     //         const map = {};
//     //         legendItems.forEach(function (item) {
//     //             map[item.name] = { ...item };
//     //         });
//     //         tooltipItems.forEach(function (item) {
//     //             const name = item.name;
//     //             const value = item.value;
//     //             if (map[name]) {
//     //                 map[name].value = value;
//     //             }
//     //         });
//     //         legend.setItems(Object.values(map));
//     //     },
//     //     onHide: function onHide() {
//     //         const legend = chart.get('legendController').legends.top[0];
//     //         legend.setItems(chart.getLegendItems().country);
//     //     }
//     // });
//     // chart.line().position('date*value').color('type');
//     // chart.render();

//     // 转换后的数据格式
//     // const transformedData = data.map(item => ({
//     //     month: item.month,
//     //     house_num_this_year: parseFloat(item.house_num_year),
//     //     house_num_last_year: item.house_num_last_year
//     // }));

//     // // 定义图表所需字段
//     // const fields = {
//     //     month: {
//     //         type: 'cat', // 类别类型，表示x轴
//     //         formatter: (val) => val.substr(-2),
//     //     },
//     // };

//     // // 创建F2图表实例
//     // const chart = new F2.Chart({
//     //     id: tagId,
//     //     pixelRatio: window.devicePixelRatio
//     // });

//     // // 设置数据源和字段
//     // chart.source(data, fields);

//     // // 绘制本年折线
//     // chart.line().position('month*house_num_year').color('#9ea0e7')

//     // // 绘制去年折线
//     // chart.line().position('month*house_num_last_year').color('#72d08c')

//     // // 显示提示框
//     // // chart.tooltip({
//     // //     showCrosshairs: true,
//     // //     crosshairsType: 'line'
//     // // });


//     // chart.tooltip({
//     //     custom: true, // 自定义 tooltip 内容框
//     //     onChange: function onChange(obj) {
//     //         // const legend = chart.get('legendController').legends.top[0];
//     //         console.error('dddss', chart.get('legendController'))
//     //         // const tooltipItems = obj.items;
//     //         // const legendItems = legend.items;
//     //         // const map = {};
//     //         // legendItems.forEach(function (item) {
//     //         //     map[item.name] = { ...item };
//     //         // });
//     //         // tooltipItems.forEach(function (item) {
//     //         //     const name = item.name;
//     //         //     const value = item.value;
//     //         //     if (map[name]) {
//     //         //         map[name].value = value;
//     //         //     }
//     //         // });
//     //         // legend.setItems(Object.values(map));
//     //     },
//     //     onHide: function onHide() {
//     //         // const legend = chart.get('legendController').legends.top[0];
//     //         // legend.setItems(chart.getLegendItems().country);
//     //     }
//     // });

//     // // 渲染图表
//     // chart.render();
// }


